/* 内河涌 弹框 河涌景观页 
 * @ 劳兆城 
 * @ 2017-08-11*/

<template>
	<div class="water-profile clear">
		<div class="water-profile-table pull-left">
			<div class="table">
				<Table 
					@on-row-click="rowClick" 
					:columns="table.thead" 
					:data="table.tbody" 
					size="small" 
					highlight-row 
					border></Table>				
			</div>
			<div class="page">
				<Page 
					:total="table.total" 
					@on-change="pageChange" 
					size="small" 
					show-total></Page>				
			</div>
		</div>
		<div class="water-profile-img pull-left">
			<loading type="circular" v-show="showLoading"></loading>
			<img 
				v-show="water.oriimgpath" 
				:src="`http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=${water.oriimgpath}`" />
			<img 
				v-show="!water.oriimgpath || havePicture" 
				src="../../img/aPictureNoPicture.png" />
		</div>
	</div>
</template>

<script>
	import { loadingMixin } from 'common/js/mixins'
import { singleWaterNetProfile } from 'common/js/table'
import { successNotice, errorNotice, createHtml } from 'common/js/dom'
import { ERR_OK } from 'api/config'
import { getWaterProfile, delWaterProfile } from 'api/aPicture'

export default {
		mixins: [loadingMixin],
		computed: {
			havePicture () {
				return JSON.stringify(this.water) === '{}'
		}
		},
		created () {
			this.page = 1
		this._getWaterProfile()
	},
		data () {
			return {
				water: {},
				table: {
					thead: singleWaterNetProfile(this),
					tbody: [],
					total: null
				},
				showLoading: false
			}
		},
		methods: {
			rowClick (row) {
				this.showLoading = true
			this.water = row
			let img = createHtml('img')
			img.src = 'http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=' + row.oriimgpath
			img.onload = () => {
					this.showLoading = false
			}
			},
			pageChange (page) {
				this.page = page
			this._getWaterProfile(page)
		},
			_delWaterProfile (row) {
				delWaterProfile(row.strivpicid).then(res => {
					if (res.code === ERR_OK) {
						this.getWaterProfile(this.page)
					this.water = {}
					successNotice('删除成功')
				} else {
						errorNotice('删除失败')
				}
				})
			},
			_getWaterProfile (page) {
				getWaterProfile(page).then(res => {
					if (res.code === ERR_OK) {
						this.table.tbody = res.result.result
				}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.singleWaterNet-model {
		.water-profile {
			width: 100%;
			height: 100%;
			padding: 0 5px;
			.water-profile-table {
				width: calc(50% - 10px);
				height: 100%;
				position: relative;
				margin-right: 10px;
				.table {
					width: 100%;
					position: absolute;
					top: 15px;
					left: 0;
				}
				.page {
					position: absolute;
					bottom: 5px;
					right: 5px;
				}
			}
			.water-profile-img {
				width: 50%;
				height: 100%;
				padding-top: 15px;
				padding-bottom: 15px;
				padding-right: 10px;
				position: relative;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}	
	}
</style>